/* eslint-disable no-script-url */
import React from 'react';
import { connect } from 'dva';
import { Button, Input, Radio } from 'zent';
import {Popover} from 'antd';
import { DesignEditor, ControlGroup } from 'zent/lib/design/editor/DesignEditor';
import { DEFAULT_BACKGROUND } from 'zent/lib/design/preview/constants';
import { COLOR_TYPE } from './constants';
import styles from './index.less';

const RadioGroup = Radio.Group;

class BaseInfoEditor extends DesignEditor {
  static designType = 'baseInfo';
  static designDescription = '';

  constructor(props) {
    super(props);
    this.state={
      inputValue:""
    }
    this.inputRef = "";
    this.isCompositions = true;    
  }

  componentDidMount(){
    window.Isoption = true;  
    const {value} = this.props;
    const that=this;        
     this.inputRef.input.addEventListener('input', function(){                              
         value.name=that.inputRef.input.value;                     
         that.props.onChange({
           ...value
         })
         emitter.emit('ItemChange',value);
               
     }.bind(this));
 }

 componentWillMount() {
    window.Isoption = false;
  }

  onInputChange= (e) =>{
    const {value} = this.props;  
  }

  onSpecificationsTypeChange = (e) =>{
    const {value} = this.props;
    value.specificationsType=e.target.value;  
    this.props.onChange({
      ...value
    })
    emitter.emit('ItemChange',value);
  }

  onDetailTypeChange = (e) =>{
    const {value} = this.props;
    value.detailType=e.target.value;  
    this.props.onChange({
      ...value
    })
    emitter.emit('ItemChange',value);
  }

  handlingComposition(){
    this.isCompositionEnd = false;
  }

  handleComposition(e){
      this.isCompositionEnd = true;
  }

  onRef = (ref) =>{
    this.inputRef=ref;
    
  }

  render() {
    const { value, settings, prefix, showError, validation,cdnUrl } = this.props;
    const content1=<img src={`${cdnUrl}/xkdnewyun/systemfile/store/baseInfo_style1.png`} className="xkd-width-per-100" style={{width:240}}/>;
    const content2=<img src={`${cdnUrl}/xkdnewyun/systemfile/store/baseInfo_style2.png`} className="xkd-width-per-100" style={{width:240}}/>;
    const content3=<img src={`${cdnUrl}/xkdnewyun/systemfile/store/sku_style1.png`} className="xkd-width-per-100" style={{width:240}}/>;
    const content4=<img src={`${cdnUrl}/xkdnewyun/systemfile/store/sku_style2.png`} className="xkd-width-per-100" style={{width:240}}/>;
    return (
      <div>
        <div className={`xkd-moduleTitle`} style={{ fontSize: '14px' }}>
          商品页模板
        </div>
        <div className={`${prefix}-design-component-config-editor`}>
          <ControlGroup
            showError={showError || this.getMetaProperty('name', 'touched')}
            error={validation.name}
            required
            label="模板名称："
            className={`xkd-ml-4 ${styles.inputGroup}`}
          >
            <Input
              value={value.name}
              onChange={this.onInputChange}
              // onCompositionStart={this.handlingComposition} 
              // onCompositionUpdate={this.handlingComposition} 
              // onCompositionEnd={this.handleComposition} 
              // onBlur={this.onInputBlur}
              name="name"
              placeholder="最多20个字符"
              ref = {this.onRef}
              style={{width:212}}
            />
          </ControlGroup>
          <ControlGroup
            label="基本信息："
            labelAlign="top"
            className={`${prefix}-design-component-config-editor__background`}
            focusOnLabelClick={false}
            showError={showError || this.getMetaProperty('detailType', 'touched')}
            error={validation.detailType}
          >
            <RadioGroup value={value.detailType} onChange={this.onDetailTypeChange}>
              <Radio name="detailType" value={COLOR_TYPE.SYSTEM}>
                <span className="xkd-mr8">样式一</span>
                <Popover placement="bottom"  content={content1} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
              <Radio name="detailType" value={COLOR_TYPE.CUSTOM}>
                <span className="xkd-mr8">样式二</span>
                <Popover placement="bottom" content={content2} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
            </RadioGroup>
          </ControlGroup> 
          <ControlGroup
            label="商品规格："
            labelAlign="top"
            className={`${prefix}-design-component-config-editor__background`}
            focusOnLabelClick={false}
            showError={showError || this.getMetaProperty('specificationsType', 'touched')}
            error={validation.specificationsType}
          >
            <RadioGroup value={value.specificationsType} onChange={this.onSpecificationsTypeChange}>
              <Radio name="specificationsType" value={COLOR_TYPE.SYSTEM}>
                <span className="xkd-mr8">折叠版</span>
                <Popover placement="bottom"  content={content3} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
              <Radio name="specificationsType" value={COLOR_TYPE.CUSTOM}>
                <span className="xkd-mr8">展开版</span>
                <Popover placement="bottom"  content={content4} trigger="hover">
                  <a>示例</a>
                </Popover>
              </Radio>
            </RadioGroup>
          </ControlGroup>                    
        </div>
      </div>
    );
  } 

  static getInitialValue() {
    return {
      // 模板名称
      name: '',
      specificationsType: 1,
      detailType:1
    };
  }

  static validate(value) {
    return new Promise(resolve => {
      const errors = {};
      const { name } = value;
      if (!name || !name.trim()) {
        errors.name = '模板名称必填，最多20个字';
      } else if (name.length > 20) {
        errors.name = '模板名称必填，最多20个字';
      }

      resolve(errors);
    });
  }
}


export default connect(({ global }) => ({
    cdnUrl:global.oemInfo.cdnUrl,
}))(BaseInfoEditor);
